import React, { useState } from "react";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { PageLayout } from "@/components/grid/PageLayout";
import { Card, Badge, Grid, Image, Stepper, Toast } from "antd-mobile";

interface SnackItem {
  id: string;
  name: string;
  price: number;
  image: string;
  description: string;
  stock: number;
}

interface CartItem extends SnackItem {
  quantity: number;
}

const mockSnacks: SnackItem[] = [
  {
    id: "1",
    name: "乐事薯片",
    price: 6.5,
    image: "https://img01.yzcdn.cn/vant/ipad.jpeg",
    description: "原味薯片，香脆可口",
    stock: 50,
  },
  {
    id: "2",
    name: "可口可乐",
    price: 3.5,
    image: "https://img01.yzcdn.cn/vant/ipad.jpeg",
    description: "冰镇可乐，透心凉",
    stock: 100,
  },
  // 可以添加更多零食
];

const SnackOrder: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const theme = useSelector((state: any) => state.theme);
  const [cartItems, setCartItems] = useState<CartItem[]>([]);

  const handleQuantityChange = (item: SnackItem, quantity: number) => {
    if (quantity === 0) {
      setCartItems((prev) => prev.filter((i) => i.id !== item.id));
      return;
    }

    const existingItem = cartItems.find((i) => i.id === item.id);
    if (existingItem) {
      setCartItems((prev) =>
        prev.map((i) => (i.id === item.id ? { ...i, quantity } : i))
      );
    } else {
      setCartItems((prev) => [...prev, { ...item, quantity }]);
    }
  };

  const getTotalQuantity = () => {
    return cartItems.reduce((sum, item) => sum + item.quantity, 0);
  };

  const handleCartClick = () => {
    if (cartItems.length === 0) {
      Toast.show({
        content: t("订单.购物车.为空"),
      });
      return;
    }
    navigate("/payment", { state: { cartItems } });
  };

  return (
    <PageLayout title={t("订单.便捷订购.标题")}>
      <Container>
        <Grid columns={2} gap={12}>
          {mockSnacks.map((snack) => (
            <SnackCard key={snack.id} $theme={theme}>
              <ImageContainer>
                <Image src={snack.image} fit="cover" />
              </ImageContainer>
              <Content>
                <Name>{snack.name}</Name>
                <Description>{snack.description}</Description>
                <PriceRow>
                  <Price $theme={theme}>¥{snack.price.toFixed(2)}</Price>
                  <StyledStepper
                    min={0}
                    max={snack.stock}
                    value={
                      cartItems.find((i) => i.id === snack.id)?.quantity || 0
                    }
                    onChange={(value) => handleQuantityChange(snack, value)}
                  />
                </PriceRow>
              </Content>
            </SnackCard>
          ))}
        </Grid>

        <CartButton onClick={handleCartClick} $theme={theme}>
          <Badge content={getTotalQuantity() || null}></Badge>
        </CartButton>
      </Container>
    </PageLayout>
  );
};

export default SnackOrder;

const Container = styled.div`
  padding: 12px;
  padding-bottom: 80px;
`;

const SnackCard = styled(Card)<{ $theme: string }>`
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  ${(props) =>
    props.$theme === "pink" &&
    `
    &:hover {
      box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1);
    }
  `}

  ${(props) =>
    props.$theme === "green" &&
    `
    &:hover {
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
    }
  `}

  ${(props) =>
    props.$theme === "sky" &&
    `
    &:hover {
      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
    }
  `}
`;

const ImageContainer = styled.div`
  width: 100%;
  height: 120px;
  overflow: hidden;

  .adm-image {
    width: 100%;
    height: 100%;
  }
`;

const Content = styled.div`
  padding: 12px;
`;

const Name = styled.div`
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
`;

const Description = styled.div`
  font-size: 14px;
  color: var(--adm-color-text-secondary);
  margin-bottom: 8px;
`;

const PriceRow = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const Price = styled.div<{ $theme: string }>`
  font-size: 18px;
  font-weight: 600;
  color: var(--adm-color-primary);

  ${(props) =>
    props.$theme === "pink" &&
    `
    color: #EC4899;
  `}

  ${(props) =>
    props.$theme === "green" &&
    `
    color: #10B981;
  `}

  ${(props) =>
    props.$theme === "sky" &&
    `
    color: #0EA5E9;
  `}
`;

const StyledStepper = styled(Stepper)`
  --border-radius: 20px;
  --button-width: 28px;
  --input-width: 40px;
  --height: 28px;
  --input-font-size: 14px;
  --border-color: var(--adm-color-border);
`;

const CartButton = styled.div<{ $theme: string }>`
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--adm-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }

  ${(props) =>
    props.$theme === "pink" &&
    `
    background: linear-gradient(to right, #EC4899, #F472B6);
  `}

  ${(props) =>
    props.$theme === "green" &&
    `
    background: linear-gradient(to right, #10B981, #34D399);
  `}

  ${(props) =>
    props.$theme === "sky" &&
    `
    background: linear-gradient(to right, #0EA5E9, #38BDF8);
  `}
`;
